<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">添加客户</block>
		</cu-custom>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">头像</view>
				<view class="cu-avatar radius bg-gray" @click="chooseImage" v-if="!avatar"></view>
				<view class="bg-img" @tap="chooseImage" v-if="avatar">
				 <image style="width: 100upx;height: 100upx;border-radius: 50upx;" :src="avatar" mode="aspectFill"></image>
				</view>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">姓名</view>
				<input style="text-align: right;" @input="nameInput" placeholder="请输入姓名" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号</view>
				<input style="text-align: right;" type="number" @input="phoneInput" placeholder="请输入手机号" name="input"></input>
			</view>
			<radio-group class="block" @change="RadioChange">
				<view class="cu-form-group">
					<view class="title">性别</view>
					<view>
						<radio class='blue radio margin-sm' :class="radio=='C'?'checked':''" :checked="radio=='C'?true:false" value="C"></radio> 男
						<radio class='blue radio margin-sm' :class="radio=='D'?'checked':''" :checked="radio=='D'?true:false" value="D"></radio> 女
					</view>
				</view>
			</radio-group>
			<view class="cu-form-group">
				<view class="title">生日</view>
				<picker mode="date" :value="date" start="1900-09-01" end="2030-09-01" @change="DateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group" v-if="radio=='D'">
				<view class="title">生理期</view>
				<picker mode="date" :value="date" start="1900-09-01" end="2030-09-01" @change="DateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group" v-if="radio=='D'">
				<view class="title" >生理周期</view>
				<picker mode="date" :value="date" start="1900-09-01" end="2030-09-01" @change="DateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			
			<view class="margin-top" style="background-color: #fff;padding: 30upx;">
				<view>客户标记</view>
				<textarea style="margin-top: 30upx;height: 150upx;" :disabled="modalName!=null" @input="textareaAInput" placeholder="如:卡号..."></textarea>
			</view>
			<view class="margin-top" style="background-color: #fff;padding: 30upx;">
				<view>健身标签</view>
				<textarea style="margin-top: 30upx;height: 100upx;" :disabled="modalName!=null" @input="textareaBInput" placeholder="添加备注"></textarea>
			</view>
			<button type="default" style="width: 80%;margin-left: 10%;background-color: #1496EC;border-radius: 50upx;color: #FFFFFF;margin-top: 20upx;margin-bottom: 150upx;" @click="submit">保存</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: -1,
				multiIndex: [0, 0, 0],
				time: '12:01',
				date: '请选择生日',
				radio: '',
				imgList: [],
				avatar: '',
				modalName: null,
				textareaAValue: '',
				textareaBValue: '',
				openid:'',
				name:'',
				sex:'',
			};
		},
		onReady(){
			var o = this
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					o.openid = res.data
			 },
			 fail: () => {
			 }
			});
		},
		methods: {
			submit(){
				if(this.radio=='C'){
					this.sex = '男'
				}
				if(this.radio=='D'){
					this.sex = '女'
				}
				var data = {
					'openid': this.openid,
					'name':this.name,
					'avatar':this.avatar,
					'phone':this.phone,
					'sex':this.sex,
					'mark':this.textareaAValue,
					'label':this.textareaBValue,
					'birth' :this.date,
				}
				console.log(data)
				uni.request({
					url: 'https://wechatdemo.mygodmall.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member.biaodan&app=1',
					method: 'POST',
					data: data,
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						if(res.data.error==0){
							uni.showToast({
								title:res.data.message,
								duration: 2000
							})
							setTimeout(function() {
								uni.navigateTo({
									url:'/pages/user/record/record'
								})
							}, 2000);
						}else{
							uni.showToast({
								title:res.data.message,
								duration: 2000
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			PickerChange(e) {
				this.index = e.detail.value
			},
			nameInput(e){
				this.name = e.detail.value
			},
			phoneInput(e){
				this.phone = e.detail.value
			},
			MultiChange(e) {
				this.multiIndex = e.detail.value
			},
			TimeChange(e) {
				this.time = e.detail.value
			},
			DateChange(e) {
				this.date = e.detail.value
			},
			RegionChange(e) {
				this.region = e.detail.value
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			chooseImage(){
				var _this = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
							let file = res.tempFilePaths
							var images = []
							var img = ''
							for(var i = 0; i<res.tempFilePaths.length; i++) {
								uni.uploadFile({
									url: 'https://wechatdemo.mygodmall.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
									//仅为示例，非真实的接口地址
									filePath: file[i],
									name: 'file',
									formData: {
										'user': 'test'
									},
									success: (res) => {
										images.push(JSON.parse(res.data).url)
										_this.imagess = images
										_this.avatar = _this.imagess[0]
										
										img = img + JSON.parse(res.data).url + ';'
										_this.imgurl = img
									}
								});
							}
				    }
				});
			},
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},
			textareaBInput(e) {
				this.textareaBValue = e.detail.value
			}
		}
	}
</script>

<style>
	@import "/colorui/main.css";
	@import "/colorui/icon.css";
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
